<template>
	<view class="page">
		<view class="header">
			<view class="header-title">
				<image src="/static/images/rank/trophy.png"></image>
				<text>绩效考核</text>
			</view>
			<text class="header-date">-- 2024.12 --</text>
		</view>
		<view class="ranking">
			<view :style="{ height: scrollHeight + 'px' }">
			  <zb-table
				  :cell-style="cellStyle"
			      :columns="column"
				  :isShowLoadMore="true"
				  ref="zbTable"
			      :stripe="true"
			      :border="true"
				  @pullUpLoading="pullUpLoadingAction"
			      :data="list"></zb-table>
			</view>
		</view>
	</view>
</template>

<script>
	import { listPerformanceRankingPC } from "@/api/boc/performanceRankingPC"
	export default {
		data(){
			return {
				// 初始化滚动高度
				scrollHeight: 0,
				list: [],
				total:0,
				queryParams: {
				    pageNum: 1,
				    pageSize: 20
				  },
				column: [
				    { name: 'ranking', label: '排名',fixed:true,width:60,align:'center'},
				    { name: 'ehrName', label: '业务人员',fixed:true,width:80,align:'center',emptyString:'--' },
				    { name: 'currLoadBal', label: '当前贷款余额(万元)',align:'center',width:140},
				    { name: 'lmLoadBal', label: '较上月末贷款余额(万元)',align:'center',width:160},
				    { name: 'lyLoadBal', label: '较去年末贷款余额(万元)',align:'center',width:160},
				    { name: 'currCustNum', label: '客户数',align:'center',width:70},
				    { name: 'lmCustNum', label: '较上月末客户数',align:'center',width:120},
				    { name: 'lyCustNum', label: '较去年末客户数',align:'center',width:120},
				],  
				//返回顶部
				scrollTop: 0,
			    showBackToTop: false,  				  
			}
		},
		onLoad() {
			// 页面加载时设置scroll-view的高度
			this.setScrollViewHeight();
			this.getPerformanceRankingPC();
		},
		methods: {
		  show(e) {
		    alert(e);
		  },
		  setScrollViewHeight() {
			// 获取系统信息，包括屏幕高度
			uni.getSystemInfo({
			  success: (info) => {
				// 假设顶部有个固定高度的header（例如：100px），底部有个固定高度的footer（例如：50px）
				const headerHeight = 100;
				const footerHeight = 50;
				// 计算scroll-view的可滚动高度
				this.scrollHeight = info.windowHeight - headerHeight - footerHeight-70;
			  }
			});
		  },
		  getPerformanceRankingPC() {
		    listPerformanceRankingPC(this.queryParams).then(response => {
			  this.total = response.total;
		      this.list =this.list.concat(response.rows);
			  this.$refs.zbTable.pullUpCompleteLoading('ok')
		    })
		  },
		  pullUpLoadingAction(done){
			  let maxPage = (this.total/this.queryParams.pageSize) | 0;
			  if(this.queryParams.pageNum <= maxPage){
				  this.queryParams.pageNum = this.queryParams.pageNum+1;
				  this.getPerformanceRankingPC();
			  }
		  },
		  cellStyle({row, column, rowIndex, columnIndex}){
			//console.log('row, column, rowIndex, columnIndex')
			if(columnIndex === 3 && row.lmLoadBal >0) {
			  return{
				color:'red'
			  }
			}else if(columnIndex === 3 && row.lmLoadBal <0){
				return{
				color:'green'
			  }
			}else if(columnIndex === 4 && row.lyLoadBal >0){
				return{
				color:'red'
			  }
			}else if(columnIndex === 4 && row.lyLoadBal <0){
				return{
				color:'green'
			  }
			}else if(columnIndex === 6 && row.lmCustNum >0){
				return{
				color:'red'
			  }
			}else if(columnIndex === 6 && row.lmCustNum <0){
				return{
				color:'green'
			  }
			}else if(columnIndex === 7 && row.lyCustNum >0){
				return{
				color:'red'
			  }
			}else if(columnIndex === 7 && row.lyCustNum <0){
				return{
				color:'green'
			  }
			}
		  }
		},
	}
</script>

<style lang="scss">
	page{
		background: #b6002a;
		height: 100%;
	}
	
	.page{
		padding-bottom: 20rpx;
		
		.header{
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;
			padding: 20rpx;
			
			.header-title{
				display: block;
				background: #F2856E;
				width: 400rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 20rpx;
				font-size: 18px;
				text-align: center;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image{
					width: 50rpx;
					height: 50rpx;
					margin-right: 8rpx;
				}
			}
			
			.header-date{
				margin: 20rpx;
				font-weight: bold;
			}
		}
		
		.ranking{
			width: 700rpx;
			border-radius: 30rpx;
			margin: auto;
			background: #fff;
			box-sizing: border-box;
			padding: 20rpx;
		}
	}
</style>